<!--
 * @Author: ChaiHongJun
 * @Date: 2021-07-12 13:48:17
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-07-15 17:49:01
 * @version: 
 * @Description: 文章列表组件
-->
<template>
  <div class="article-list">
    <van-pull-refresh
      v-model="refreshing"
      :success-text="successText"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) in currentList"
          :key="index"
          :title="item.title"
          :label="item.aut_name"
          @click="toDetail(item.art_id)"
        />
        <template #icon>
          <img :src="item.cover.images" :alt="item.title" />
        </template>
        <template #extra>
          <span>{{ item.comm_count }}评论</span>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getArticles } from "@/api/user";
import { Toast } from "vant";
import { jump } from "@/utils/jump.js";
export default {
  name: "ArticleList",
  components: {},
  props: {
    channel: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      currentChannel: {},
      currentList: [],
      loading: false, //列表加载
      finished: false, //加载完毕
      refreshing: false, //下拉刷新
      with_top: 1,
      timestamp: 0,
      successText: "刷新成功",
    };
  },
  watch: {
    channel: {
      immediate: true,
      deep: true,
      handler(val) {
        this.currentChannel = val;
        this.currentList = [];
        this.onLoad();
      },
    },
  },
  methods: {
    //加载内容列表
    async onLoad() {
      console.log("props:");
      console.log(this.channel.name);
      //异步请求更多列表
      try {
        this.timestamp = new Date().getTime();
        let { data, status } = await getArticles(
          this.currentChannel.id,
          this.timestamp,
          this.with_top
        );
        console.log("响应结果：", data.data);
        if (status == 200) {
          this.currentList.push(...data.data.results);
          this.loading = false;
          // 取完当前时间的
          if (data.data.results.length) {
            this.timestamp = data.data.pre_timestamp;
          } else {
            this.finished = true;
          }
        } else if (status == 400) {
          Toast.fail({ duration: 3000, message: "请求参数错误" });
          this.loading = false;
          this.finished = true;
        } else if (status == 507) {
          Toast.fail({ duration: 3000, message: "数据库错误" });
          this.loading = false;
          this.finished = true;
        }
      } catch (err) {
        //未知错误
        Toast.fail({ duration: 3000, message: err.message });
        this.loading = false;
        this.finished = true;
        console.log(err);
      }
    },
    async onRefresh() {
      //发送加载请求判断是否已经没有数据
      let { data, status } = await getArticles(
        this.currentChannel.id,
        this.timestamp,
        this.with_top
      );
      if (status == 200) {
        console.log("下拉请求成功");
        console.log("添加的数据：", data.data.results);
        this.currentList = [];
        this.currentList.unshift(...data.data.results);
        if (data.data.results.length) {
          this.successText = `刷新成功，添加了${data.data.results.length}条内容`;
          this.timestamp = data.data.pre_timestamp;
        } else {
          this.successText = `刷新成功，没有更多的内容`;
        }
        this.refreshing = false;
      } else if (status == 400) {
        Toast.fail({ duration: 3000, message: "请求参数错误" });
        this.refreshing = false;
      } else if (status == 507) {
        Toast.fail({ duration: 3000, message: "数据库错误" });
        this.refreshing = false;
      }
    },
    toDetail(id) {
      console.log("id", id);
      //路由跳转前,先判断登录状态
      jump("Detail", id);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped lang="less"></style>